<template>
  <div id="result">
    <vue-particles
        class="login-bg"
        color="#39AFFD"
        :particleOpacity="0.7"
        :particlesNumber="100"
        shapeType="circle"
        :particleSize="4"
        linesColor="#8DD1FE"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
    ></vue-particles>
    <div style=" width: 80%;margin: 0 auto;">
      <el-row style="height: 80%">
        <h2> 标签：{{ this.$route.query.keyword }}</h2>
        <el-link v-if=articleHave style="font-size: 25px" type="primary" @click.native="toHome">未查询到指定文章，换个关键词试试吧！
        </el-link>
        <el-card shadow="hover" v-for="(item) in result" style="margin: 50px;">
          <el-link style="font-size: 25px" type="primary" @click.native="toArticle(item.id)">{{ item.title }}
          </el-link>
          <div>{{ item.authorName }}</div>
          <div style="text-align: right">{{ item.createTime }}</div>
        </el-card>
      </el-row>
    </div>

  </div>
</template>

<script>
import qs from "qs";

export default {
  name: "search",
  data() {
    return {
      result: [],
      articleHave: false
    }
  },

  created() {
    this.getResult();
  },
  watch: {
    '$route': 'getResult',
  },

  methods: {
    toHome() {
      this.$router.push({path: '/'})
    },
    getResult() {
      this.$axios({
        method: 'post',           /* 指明请求方式，可以是 get 或 post */
        url: '/article/searchByLabel',       /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */
        data: ({
          keyword: this.$route.query.keyword
        })
      })
          .then(res => {              /* res 是 response 的缩写 */
            this.result = res.data.data
            if (this.result.length === 0)
              this.articleHave = true;
            for (let i in this.result) {
              this.result[i].createTime = this.result[i].createTime.replace(/T/g, " ")
              this.result[i].createTime = this.result[i].createTime.replace(/.000\+00:00/g, "")
            }
          })
          .catch(err => {
            this.articleHave = true;
            console.log(err);         /* 若出现异常则在终端输出相关信息 */
          })
    },

    toArticle(id) {
      this.$router.push({path: '/text', query: {passageID: id}})
    }
  }
}
</script>

<style scoped>

</style>
